<template>
    <div>
		<el-dialog
		  title="注册"
		  :visible.sync="registerMask"
		  width="30%"
		  >
		  <el-input v-model="username" placeholder="请输入账号"></el-input>
		  <el-input v-model="password" placeholder="请输入密码" style="margin-top:16px"></el-input>
		  <el-input v-model="repassword" placeholder="请确认密码" style="margin-top:16px"></el-input>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="registerMask = false">取 消</el-button>
		    <el-button type="primary" @click="loginSure">确 定</el-button>
		  </span>
		</el-dialog>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        username:"",
        password:"",
        repassword:""
      };
    },
    computed: {
        registerMask: {
          get: function () {
            return this.$store.state.mutations.registerMask
          },
          set: function () {
            return this.$store.state.mutations.registerMask = false; 
          }     
        }
    },
    methods: {
       loginSure(){
           let username = this.username,
               password = this.password,
               repassword = this.repassword;
           if(username =="" || password ==""){
               this.$message({
		            message: '账号或者密码不能为空',
		            type: 'error'
		       });  
           }else if(password != repassword){
               this.$message({
		            message: '两次输入的密码不一致',
		            type: 'error'
		       });  

           }else{
           	   this.$http({
                       method: "post", 
                       url: this.url +'/articles/register',
                       data:{
                       	  username : username,
                       	  password : password,
                       	  repassword : repassword
                       }
                })
                 .then(res => {
                     if(res.data.code == 200){
                        if(res.data.msg == "账号已存在"){
                          	this.$message({
                                message: '账号已存在',
                                type: 'error'
                             }); 
                        }else{
                          	this.$message({
                                message: '创建成功',
                                type: 'success'
						                 }); 

                          	  this.registerMask = false;
                        }
                     }else{
                     	   this.$message({
                              message: '服务器异常',
                              type: 'error'
                          }); 
                     }
                })
           }
       }
    }
  };
</script>